<template>
  <div class="drawer">
    <div :class="isopen?'mask':''" @click="close"/>
    <div :class="isopen?'open':'close'">
        <el-card>
           <!-- 第一部分 -->
           <el-row>
            <el-col :span="24">
           <div class="avatar_box">
              <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif">
          </div>
            </el-col>
            </el-row>
           <el-row>
            <el-col :span="24">
           <div style="text-align:center;margin-top: 10px;">
              {{ userInfo.name }}
          </div>
            </el-col>
            </el-row>
             <el-row>
            <el-col :span="12">
                <el-button class="logout"  type="success" icon="HMS el-icon-zaixian" disabled>在 线</el-button>
            </el-col>
            <el-col :span="12">
                <el-button class="logout"  type="danger" icon="HMS el-icon-zhuxiao1" @click="logout">注 销</el-button>
            </el-col>
            </el-row>
            <el-row class="skill">
            <el-col :span="24">
                <div style="text-align:center">
              <i class="el-icon-magic-stick" style="">码畜技能点</i>
            </div>   
            </el-col>
            </el-row>
             <el-row>
            <el-col :span="24">
                <i class="el-icon-tableware" style="">Eat</i>
                <el-progress :text-inside="true" :stroke-width="26" :percentage="100" status="success"></el-progress>
                <i class="el-icon-alarm-clock" style="">Sleep</i>
                <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
                <i class="el-icon-edit-outline" style="">Java</i>
                <el-progress :text-inside="true" :stroke-width="20" :percentage="70" ></el-progress>
                <i class="el-icon-edit-outline" style="">JavaScript</i>
                <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
                <i class="el-icon-edit-outline" style="">Vue</i>
                <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
                <i class="el-icon-female" style="">Hit On a Girl</i>
                <el-progress :text-inside="true" :stroke-width="22" :percentage="10" status="warning"></el-progress>
            </el-col>
            </el-row>
            <el-row>
            <el-col :span="12">
                <div style="text-align:center;margin-top: 30px;">
                    <el-link icon="el-icon-edit" type="warning">修改头像</el-link>
            </div>   
            </el-col>
                   <el-col :span="12">
                <div style="text-align:center;margin-top: 30px;">
                    <el-link icon="el-icon-edit" type="warning" @click="dialogPassWordVisible()">修改密码</el-link>
            </div>   
            </el-col>
            </el-row>
        </el-card>
    </div>
       <el-dialog title="密码修改" :visible.sync="dialogPassWordFormVisible" width="20%">
      <el-form status-icon :model="resetPassWord" :rules="FormRules" ref="resetPassWord" label-width="80px" autocomplete="off">
        <el-form-item prop="oldPassword" label="旧密码">
          <el-input prefix-icon="el-icon-lock" type="password" v-model="resetPassWord.oldPassword"></el-input>
        </el-form-item>
        <el-form-item prop="newPassword" label="新密码">
          <el-input prefix-icon="el-icon-lock" type="password" v-model="resetPassWord.newPassword"></el-input>
        </el-form-item>
        <el-form-item prop="reNewPassword" label="确认密码">
          <el-input prefix-icon="el-icon-lock" type="password" v-model="resetPassWord.reNewPassword"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canclePasswordForm()">取 消</el-button>
        <el-button type="primary" @click="updatePassword()">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { isNumAndAlp } from '@/utils/validate'
export default {
  data() {
     var checkPassword = (rule,value,callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        }
        if(!isNumAndAlp(value)){
           return callback(new Error('密码只能是字母和数字'));
        }
        callback();
      }
       var reCheckPassword = (rule,value,callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        }
        if(!isNumAndAlp(value)){
           return callback(new Error('密码只能是字母和数字'));
        }
        if(value !== this.resetPassWord.newPassword){
           return callback(new Error('两次密码不一致'));
        }
        callback();
      }
    return {
      userInfo: {},
      isopen: false,
      dialogPassWordFormVisible: false,
      resetPassWord: {},
      FormRules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPassword: [
           { min: 6, max: 10, message: '密码6-10位', trigger: 'blur' },
           { required: true,validator: checkPassword, trigger: 'blur' }
        ],
          reNewPassword: [
           { min: 6, max: 10, message: '密码6-10位', trigger: 'blur' },
           { required: true,validator: reCheckPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    close() {
      this.isopen = false
    },
    logout() {
     this.$confirm('确认注销登陆状态?', '退出提示', {
        confirmButtonText: '退出',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         this.$api.login.logout().then(res => {
        if (res.code === 401 || res.code === 200) {
          window.sessionStorage.clear()
          this.$router.push('/login')
        }
      })
      }).catch(() => {
        // this.$message.info('已取消')
      })
    },
    dialogPassWordVisible () {
      this.resetPassWord = {}
      this.dialogPassWordFormVisible = !this.dialogPassWordFormVisible
    },
    canclePasswordForm () {
      this.dialogPassWordFormVisible = !this.dialogPassWordFormVisible
       //this.resetPassWord = {}
    },
    updatePassword () {
       this.$refs.resetPassWord.validate((valid) => {
        if (valid) {
          this.$confirm('确认修改密码?', '修改提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.resetPassWord.userId = this.userInfo.userId
         this.$api.user.updatePassword(this.resetPassWord).then(res => {
        if (res.code === 200) {
          window.sessionStorage.clear()
          this.$message.error('修改成功,请重新登陆')
          this.$router.push('/login')
        }else{
          this.$message.error(res.message)
        }
      })
      }).catch(() => {
        // this.$message.info('已取消')
      })
        }
        })
    },
  }
}
</script>
<style lang="less" scoped>
  .drawer {
    .mask {
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .1);
    }
    .close {
      position: absolute;
      z-index: 10;
      left: -800px;
      top: 0;
      width: 0px;
      height: 0%;
      background: #fff;
      transition: left linear 1s;
    }
    .open {
      position: absolute;
      z-index: 10;
      right: 0;
      top: 0;
      width: 400px;
      height: 100%;
      background: #fff;
      transition: left linear 1s;
      .header {
        margin: 0 20px;
        height: 40px;
        border-bottom: 1px solid #dddddd;
        p {
          margin-top: 30px;
        }
      }
    }
    .logout {
        margin-left: 45px;
    }
    .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

    .el-card {
        margin-top: 0px;
        height: 100%;
    }

    .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    left: 50%;
    transform: translate(65%, 0%);
    background-color: #fff;
    img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
    }
}
    .el-progress {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    }
  }
  .skill {
      margin-top: 50px;
  }
</style>
